<template>
    <el-dialog
        v-model="menuRoleAuthorisationDialogVisible"
        title="菜单授权"
        width="40%"
        align-center
        :show-close="true"
        :close-on-click-modal="false"
        @close="closeDialog"
    >
        <el-input v-model="searchInfo" style="width: 50%" placeholder="搜素角色" clearable @input="searchInfoChange()"/>
        <el-button type="primary" style="margin-left: 2%" :loading="saveLoading" @click="saveRolePermission()">保 存</el-button>
        <el-table
            :data="roleFilterInfoList"
            style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
            row-key="id"
            border
            :stripe="true"
            :show-overflow-tooltip="true"
            ref="tableRef"
            class="tableContainer"
            max-height="50vh"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" :reserve-selection="true"/>
            <el-table-column prop="roleCode" label="角色Code" />
            <el-table-column prop="roleName" label="角色名称" />
            <el-table-column prop="roleDescription" label="角色描述" />
        </el-table>
    </el-dialog>
</template>

<script setup lang="ts" name="MenuRoleAuthorisationDialog">
import {roleInfoQuery, menuRoleInfoQuery, menuRoleAuthInfoCreate} from "@/request/role";
import {ElNotification, TableInstance} from "element-plus";
import {computed, defineProps, nextTick, onMounted, onUpdated, ref} from "vue";
import {useMenuStore} from "@/stores/menu/menu";

const props = defineProps(['menuRoleAuthorisation']);

let menuRoleAuthorisation = computed(() => {return props['menuRoleAuthorisation']})

let roleInfoList = ref([]);
let roleFilterInfoList = ref([]);
let searchInfo = ref('');
let selectListInfo = ref([]);
let saveLoading = ref(false);

let menuRoleAuthorisationDialogVisible = computed(() => {return useMenuStore().menuRoleAuthorisationDialog})

let tableRef = ref<TableInstance>();

// 查询角色列表
let info = {
    pageInfo: {
        pageIndex: 1,
        pageSize: 10000
    }
}
roleInfoQuery(info).then(res => {
    roleInfoList.value = res.data["dataList"]
    roleFilterInfoList.value = res.data["dataList"]
})

function closeDialog() {
    useMenuStore().resetMenuRoleAuthorisationDialog(false);
}

function searchInfoChange() {
    roleFilterInfoList.value = [];
    // 遍历所有数据，查询出符合条件的数据
    roleInfoList.value.forEach(res => {
        if (res.roleCode.includes(searchInfo.value) || res["roleName"].includes(searchInfo.value)) {
            roleFilterInfoList.value.push(res)
        }
    })
}

function saveRolePermission() {
    saveLoading.value = true
    // 拼接参数
    let requestInfo = {
        menuId: menuRoleAuthorisation.value.id,
        menuRoleAuthDtos: []
    }
    selectListInfo.value.forEach(res => {
        let requestInfoItem = {
            menuId: menuRoleAuthorisation.value.id,
            roleCode: res.roleCode
        }
        requestInfo.menuRoleAuthDtos.push(requestInfoItem);
    })
    menuRoleAuthInfoCreate(requestInfo).then(res => {
        if (res["code"] === '200') {
            ElNotification({
                title: 'Success',
                message: res["message"],
                type: 'success'
            });
            useMenuStore().resetMenuRoleAuthorisationDialog(false);
        }
        saveLoading.value = false
    }).catch(res => {
        saveLoading.value = false
    })
}

function handleSelectionChange(val) {
    selectListInfo.value = val;
}

// 组件启动时更新当前复选框
onUpdated(() => {
    nextTick(() => {
        tableRef.value.clearSelection();
        let requestInfo = {
            menuId: menuRoleAuthorisation.value.id
        }
        menuRoleInfoQuery(requestInfo).then(res => {
            if (res["code"] === '200') {
                res.data.forEach(info => {
                    for (let i = 0; i < roleFilterInfoList.value.length; i++) {
                        if (roleFilterInfoList.value[i].roleCode === info.roleCode) {
                            tableRef.value.toggleRowSelection(roleFilterInfoList.value[i], true);
                        }
                    }
                })
            }
        })
        searchInfo.value = '';
        searchInfoChange();
    });
})
</script>

<style scoped>

</style>